<template>
<!--comment.wxml-->
<view class="container">
    <view class="type-navbar">
        <view v-for="(item, index) in categories" :key="index" class="type-box">
            <view :data-status="item.status" :class="'type-navbar-item ' + (activeStatus == item.status ? 'type-item-on' : '')" @tap="changeTab">
                {{item.name}}
            </view>
        </view>
    </view>
    <view class="goods-container">
        <view v-for="(item, index) in comments" :key="index" class="goods-box">
            <navigator class="goods-img" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=100&height=100'"></image>
            </navigator>
            <navigator class="goods-desc" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <view class="goods-name ellipsis-1">{{ item.goods_name }}</view>
                <view class="c-specification">{{ item.spec_key_name ? item.spec_key_name : '' }}</view>
                <view class="buy-time">购买时间：{{ item.payTimeFommat }}</view>
            </navigator>
            <navigator class="little-btn-2 comment-button" :hidden="!item.is_comment" :url="'/pages/user/comment_detail/comment_detail?comment_id=' + item.comment_id">
                <!-- <image class="button-icon" src="../../../images/c23.png"></image>  -->
                查看评价
            </navigator>
            <view class="little-btn-1 comment-button" :hidden="item.is_comment" @tap="comment" :data-recid="item.rec_id">
                <!-- <image class="button-icon" src="../../../images/co.png"></image>  -->
                评价订单
            </view>
        </view>
    </view>
    <view class="no-data" v-if="!comments || comments.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有找到相关的记录</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
// comment.js
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      categories: [{
        name: "全部评价",
        status: 2
      }, {
        name: "待评价",
        status: 0
      }, {
        name: "已评价",
        status: 1
      }],
      activeStatus: 0,
      comments: null,
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var status = typeof options.status == 'undefined' ? this.activeStatus : options.status;
    load.init(this, '', 'comments');
    this.requestComments(status);
  },
  onShow: function () {
    if (uni.getStorageSync('user:comment:update')) {
      uni.setStorageSync('user:comment:update', false);
      this.resetData();
      this.requestComments(this.activeStatus);
    }
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestComments(this.activeStatus);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.requestComments(this.activeStatus);
  },
  methods: {
    changeTab: function (e) {
      this.resetData();
      this.requestComments(e.currentTarget.dataset.status);
    },
    requestComments: function (status) {
      var that = this;
      var requestUrl = that.url + '/api/user/comment/status/' + status + '?p=' + that.currentPage;
      this.setData({
        activeStatus: status
      });
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.payTimeFommat = util.formatTime(val.pay_time);
        });
        uni.stopPullDownRefresh();
      });
    },

    /** 重置数据 */
    resetData: function () {
      this.comments = null;
      this.currentPage = 1;
      load.resetConfig();
    },

    /** 跳到评论页 */
    comment: function (e) {
      var rec_id = e.currentTarget.dataset.recid;
      var comments = this.comments;

      for (var i = 0; i < comments.length; i++) {
        if (comments[i].rec_id == rec_id) {
          break;
        }
      }

      if (i >= comments.length) {
        return; //没找着
      }

      var params = '?order_id=' + comments[i].order_id;
      params += '&goods_id=' + comments[i].goods_id;
      params += '&rec_id=' + comments[i].rec_id;
      params += '&goods_name=' + comments[i].goods_name;
      params += '&spec_key_name=' + comments[i].spec_key_name;
      params += '&prom_type=' + comments[i].prom_type;
      params += '&item_id=' + comments[i].item_id;
      uni.navigateTo({
        url: '/pages/user/add_comment/add_comment' + params
      });
    }
  }
};
</script>
<style>
/* comment.wxss */
.container {
    padding-bottom:0rpx;
    background: #f5f5f5;
}
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:80rpx;
    background-color: #fff;
}
.type-box{
    width:33.3333333333%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
  position: relative;
  color:#ff6a00;
  font-weight: bold;
}
.type-item-on::before{
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 50rpx;
	height: 5rpx;
	background-color: #ff6a00;
  left: 76rpx;
}
.goods-container{
    margin: 0rpx 20rpx;
    background-color: #f5f5f5;
    margin-bottom: 20rpx;
}
.goods-box{
    position: relative;
    font-size: 28rpx;
    overflow: hidden;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background: #fff;
}
.goods-img{
    float:left; 
    height: 180rpx;
    width: 180rpx;
}
.goods-desc{
    float:left;
    width: 530rpx;
    padding: 20rpx 25rpx 0 25rpx;
    box-sizing: border-box;
}
.goods-name{
    height: 60rpx;
    line-height: 30rpx;
    overflow: hidden;
    white-space: normal;
    font-size: 26rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    margin-bottom: 10rpx;
}
.buy-time{
    margin-top: 14rpx;
    font-size: 22rpx;
    color: #b3b3b3;
}
.comment-button{
    position: absolute;
    right: 20rpx;
    bottom: 12rpx;
}
.check-evaluate{
  border: solid 1px #f3f3f3;
  color: #1c1c1c;
}
.change-order{
    color: #c2c2c2;
    border: 1rpx solid #f3f3f3;
}
.button-icon{
    height: 26rpx;
    width: 26rpx;
}
.c-specification{
  font-size: 22rpx;
  color: #999999;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>